import React, { useEffect, useState, useRef } from 'react';
import { useDispatch, connect } from 'umi';
import { Card, ConfigProvider, Table, Collapse, Form, Button } from 'antd';
import { ColumnsType, SorterResult, TableProps } from 'antd/es/table';
import { ProForm, ProFormText, ProFormSelect } from '@ant-design/pro-form';
import zhCN from 'antd/lib/locale/zh_CN';
import { FormInstance } from 'antd/lib/form';

const { Panel } = Collapse;
interface DataType {
  order: number;
  studentName: string;
  studentCode: string;
  classLabel: string;
  year: number;
  majorLabel: string;
  mentorName: string;
  cet4Score: number;
  isPass4: string;
  cet6Score: number;
  isPass6: string;
}

const CetScoreDetail = (props: any) => {
  // console.log( JSON.parse(props.user.currrentuser))
  const onClick = (record: any) => {
    props.add({
      key: '1',
      name: record.studentName,
      stuNumber: record.studentCode,
    });
  };
  // 表格列标题
  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'order',
      align: 'center',
      width: '9%',
    },
    {
      title: '姓名',
      dataIndex: 'studentName',
      align: 'center',
      width: '9%',
      render: (_, record) => (
        <a
          onClick={() => {
            onClick(record);
          }}
        >
          {record.studentName}
        </a>
      ),
    },
    {
      title: '学号',
      dataIndex: 'studentCode',
      align: 'center',
      width: '9%',
    },
    {
      title: '班级',
      dataIndex: 'classLabel',
      align: 'center',
      width: '9%',
      filters: [
        {
          text: '新能221',
          value: '新能221',
        },
        {
          text: '新能222',
          value: '新能222',
        },
        {
          text: '电气2201',
          value: '电气2201',
        },
        {
          text: '电气2202',
          value: '电气2202',
        },
        {
          text: '电气2203',
          value: '电气2203',
        },
        {
          text: '电气2204',
          value: '电气2204',
        },
        {
          text: '电气2205',
          value: '电气2205',
        },
        {
          text: '电气2206',
          value: '电气2206',
        },
        {
          text: '电气2207',
          value: '电气2207',
        },
        {
          text: '电气2208',
          value: '电气2208',
        },
        {
          text: '电气2209',
          value: '电气2209',
        },
        {
          text: '电气2210',
          value: '电气2210',
        },
      ],
      onFilter: (value, record) => record.classLabel.indexOf(value) === 0,
    },
    {
      title: '年级',
      dataIndex: 'year',
      align: 'center',
      width: '9%',
    },
    {
      title: '专业',
      dataIndex: 'majorLabel',
      align: 'center',
      width: '9%',
    },
    {
      title: '班导师',
      dataIndex: 'mentorName',
      align: 'center',
      width: '9%',
    },
    {
      title: '四级分数',
      dataIndex: 'cet4Score',
      align: 'center',
      sorter: (a, b) => a.cet4Score - b.cet4Score,
      width: '9%',
    },
    {
      title: '是否通过',
      dataIndex: 'isPass4',
      align: 'center',
      width: '9%',
    },
    {
      title: '六级分数',
      dataIndex: 'cet6Score',
      align: 'center',
      sorter: (a, b) => a.cet4Score - b.cet4Score,
      width: '9%',
    },
    {
      title: '是否通过',
      dataIndex: 'isPass6',
      align: 'center',
      width: '9%',
    },
  ];
  const dispatch = useDispatch();
  const formRef = useRef<FormInstance>(null);
  const [result, setResult] = useState([]);
  const [initialData, setInitialData] = useState<Array<DataType>>([]); // 保存初始数据
  useEffect(() => {
    //获取数据接口
    dispatch({
      type: 'Model_StudentAnalysisStudentModel/getCetdetialEffects',
      payload: {
        studentCode: JSON.parse(props.user.currrentuser).account,
        callback: (value: any) => {
          // console.log(value);
          setResult(value);
          setInitialData(value); // 保存初始数据
        },
      },
    });
  }, []);

  const handleChange: TableProps<DataType>['onChange'] = (
    pagination,
    filters,
    sorter,
  ) => {
    // 处理筛选逻辑
  };

  //筛选
  const searchOnFinish = async (values: any) => {
    // 获取表单值
    let studentName = values.studentName;
    let classLabel = values.classLabel;
    let year = values.year;
    let majorLabel = values.majorLabel;
    let mentorName = values.mentorName;
    let isPass4 = values.isPass4;
    let isPass6 = values.isPass6;

    // 过滤逻辑
    let filteredData = result.filter((item: DataType) => {
      if (studentName && !item.studentName.includes(studentName)) {
        return false;
      }
      if (classLabel && !item.classLabel.includes(classLabel)) {
        return false;
      }
      if (year && !item.year.toString().includes(year)) {
        //year是number类型，需要转为字符串
        return false;
      }
      if (majorLabel && !item.majorLabel.includes(majorLabel)) {
        return false;
      }
      if (
        mentorName &&
        item.mentorName &&
        !item.mentorName.includes(mentorName)
      ) {
        //mentor可能为空，需要提前判断
        return false;
      }
      if (
        isPass4 !== undefined &&
        isPass4 !== '' &&
        !item.isPass4.includes(isPass4)
      ) {
        return false;
      }
      if (
        isPass6 !== undefined &&
        isPass6 !== '' &&
        !item.isPass6.includes(isPass6)
      ) {
        return false;
      }
      return true;
    });

    // 更新结果
    setResult(filteredData);
  };

  //重置
  const handleReset = () => {
    formRef.current?.resetFields();
    setResult(initialData); // 重置为初始数据
  };

  return (
    <ConfigProvider locale={zhCN}>
      {/* 搜索区 */}
      <Card
        title={
          <span style={{ fontWeight: 'bold', fontSize: 18 }}>全部CET列表</span>
        }
      >
        <ProForm
          layout="inline"
          onFinish={searchOnFinish}
          onReset={handleReset}
        >
          <ProFormText
            label="姓名"
            name="studentName"
            placeholder="请输入学生姓名"
            width={160}
          />
          <ProFormText
            label="班级"
            name="classLabel"
            placeholder="请输入班级"
            width={160}
          />
          <ProFormText
            label="年级"
            name="year"
            placeholder="请输入年级"
            width={160}
          />
          <ProFormText
            label="专业"
            name="majorLabel"
            placeholder="请输入专业"
            width={160}
          />
          <ProFormText
            label="班导师"
            name="mentorName"
            placeholder="请输入导师姓名"
            width={160}
          />
          <ProFormSelect
            label="四级是否通过"
            name="isPass4"
            initialValue=""
            width={120}
            options={[
              { value: '是', label: '是' },
              { value: '否', label: '否' },
            ]}
          />
          <ProFormSelect
            label="六级是否通过"
            name="isPass6"
            initialValue=""
            width={120}
            options={[
              { value: '是', label: '是' },
              { value: '否', label: '否' },
            ]}
          />
        </ProForm>
      </Card>
      {/* 信息展示区 */}
      <Card>
        <Table columns={columns} dataSource={result} onChange={handleChange} />
      </Card>
    </ConfigProvider>
  );
};

export default connect(({ Model_StudentAnalysisStudentModel, user }: any) => ({
  Model_StudentAnalysisStudentModel,
  user,
}))(CetScoreDetail);
